<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Proxy 与 Reflect</title>
</head>
<body>
  <script>
   const user = {
     name: 'tom',
     age: 12
   }

  // 创建代理对象
  const userProxy = new Proxy(user, {
    // 拦截读属性
    get: function(target, property) {
      console.log('拦截到读取属性', property)
      // return target[property]
      return Reflect.get(target, property)
    },

    // 拦截修改或添加属性
    set: function(target, property, value) {
      console.log('拦截到修改或添加属性', property, value)
      Reflect.set(target, property, value)
    },

    // 拦截删除属性
    deleteProperty: function(target, property) {
      console.log('拦截删除属性', property)
      Reflect.deleteProperty(target, property)
    }
  })

   // 通过代理对象来操作目标数据对象中的属性
   // 读取属性
  //  console.log(userProxy.name)
   // 更新已有属性
  //  userProxy.name = 'Jack'
   // 添加新属性
  //  userProxy.sex = '女'

   // 删除属性
   delete userProxy.age

   console.log(user)



  
   
  </script>
</body>
</html>